<template>
    <div class="location-cards">
      <h2 class="title">党建地点</h2>
      <hr class="divider" />
      <div class="card-grid">
        <div 
          v-for="location in locations" 
          :key="location.id" 
          class="card"
        >
          <img 
            :src="location.image" 
            :alt="location.name" 
            class="card-image"
          />
          <div class="card-content">
            <h3 class="card-title">{{ location.name }}</h3>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { LocationListService } from '@/api/location.js'; // 导入获取地点的服务
  
  const locations = ref([]); // 存储地点信息
  
  onMounted(async () => {
    try {
      const response = await LocationListService({ page: 1, size: 5 }); // 获取前五个地点
      locations.value = response.data; // 假设返回的数据是在 response.data 里
    } catch (error) {
      console.error('Failed to fetch locations:', error);
    }
  });
  </script>
  
  <style scoped>
  .location-cards {
    width: 80%; /* 组件宽度 */
    margin: 20px auto; /* 居中 */
    background-color: white; /* 背景色，设置为白色 */
    padding: 20px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
  }
  
  .title {
    text-align: center;
    color: #D74339; /* 修改标题文字颜色为指定颜色 */
    font-size: 24px; /* 字体大小 */
    margin: 0; /* 去掉默认外边距 */
  }
  
  .divider {
    height: 2px; /* 横线的高度 */
    background-color: #D74339; /* 横线的颜色 */
    border: none; /* 去掉边框 */
    margin: 20px 0; /* 上下的间距 */
  }
  
  .card-grid {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 在水平方向上均匀分布卡片 */
  }
  
  .card {
    background-color: #f9f9f9; /* 卡片背景 */
    border-radius: 5px; /* 圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    width: 18%; /* 每个卡片的宽度 */
    text-align: center; /* 内容居中 */
    overflow: hidden; /* 隐藏溢出 */
  }
  
  .card-image {
    width: 100%; /* 图片宽度占满卡片 */
    height: 100px; /* 设定高度 */
    object-fit: cover; /* 保持图片比例并裁剪 */
  }
  
  .card-content {
    padding: 10px; /* 内边距 */
  }
  
  .card-title {
    font-size: 16px; /* 字体大小 */
    color: #333; /* 默认文字颜色 */
    margin: 0; /* 去掉默认外边距 */
  }
  </style>
  